<template>
  <div class="feedback-container">
    <!-- 导航栏 -->
    <van-nav-bar
      title="意见反馈"
      left-arrow
      @click-left="goBack"
      :style="{ backgroundColor: '#FFD847' }"
    />

    <!-- 反馈表单 -->
    <div class="feedback-form">
      <!-- 反馈类型 -->
      <div class="form-section">
        <div class="section-title">反馈类型</div>
        <van-radio-group v-model="feedbackType">
          <van-cell-group inset>
            <van-cell title="问题反馈" clickable @click="feedbackType = '问题反馈'">
              <template #right-icon>
                <van-radio name="问题反馈" />
              </template>
            </van-cell>
            <van-cell title="功能建议" clickable @click="feedbackType = '功能建议'">
              <template #right-icon>
                <van-radio name="功能建议" />
              </template>
            </van-cell>
            <van-cell title="其他" clickable @click="feedbackType = '其他'">
              <template #right-icon>
                <van-radio name="其他" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </div>

      <!-- 反馈内容 -->
      <div class="form-section">
        <div class="section-title">反馈内容 <span class="required">*</span></div>
        <van-field
          v-model="content"
          rows="6"
          autosize
          type="textarea"
          maxlength="500"
          placeholder="请详细描述您遇到的问题或建议，我们会认真对待每一条反馈！"
          show-word-limit
          class="content-field"
        />
      </div>

      <!-- 联系方式（可选） -->
      <div class="form-section">
        <div class="section-title">联系方式 <span class="optional">（可选）</span></div>
        <van-field
          v-model="contact"
          placeholder="QQ/微信/邮箱/手机号，方便我们回复您"
          class="contact-field"
        />
      </div>

      <!-- 温馨提示 -->
      <div class="tips-section">
        <van-icon name="info-o" class="tips-icon" />
        <div class="tips-text">
          <p>• 我们会将您的反馈发送到管理员邮箱</p>
          <p>• 留下联系方式可获得更快的回复</p>
          <p>• 您的反馈对我们非常重要</p>
        </div>
      </div>
    </div>

    <!-- 提交按钮 -->
    <div class="submit-button-wrapper">
      <van-button
        round
        block
        size="large"
        color="linear-gradient(to right, #FFD847, #FFC107)"
        :loading="submitting"
        @click="handleSubmit"
      >
        提交反馈
      </van-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { submitFeedback } from '@/api'
import { showToast, showSuccessToast } from 'vant'
import { useRouter } from 'vue-router'

const router = useRouter()

// 表单数据
const feedbackType = ref('问题反馈')
const content = ref('')
const contact = ref('')
const submitting = ref(false)

// 返回上一页
const goBack = () => {
  router.back()
}

// 表单验证
const validateForm = () => {
  if (!content.value.trim()) {
    showToast('请输入反馈内容')
    return false
  }

  if (content.value.trim().length < 10) {
    showToast('反馈内容至少需要10个字')
    return false
  }

  return true
}

// 提交反馈
const handleSubmit = async () => {
  // 验证表单
  if (!validateForm()) {
    return
  }

  submitting.value = true

  try {
    const feedbackData = {
      feedbackType: feedbackType.value,
      content: content.value.trim(),
      contact: contact.value.trim()
    }

    const result = await submitFeedback(feedbackData)

    if (result && result.message) {
      showSuccessToast(result.message)
      
      // 清空表单
      content.value = ''
      contact.value = ''
      feedbackType.value = '问题反馈'
      
      // 延迟返回上一页
      setTimeout(() => {
        router.back()
      }, 1500)
    }
  } catch (error) {
    console.error('提交反馈失败:', error)
    showToast(error.message || '提交失败，请稍后重试')
  } finally {
    submitting.value = false
  }
}
</script>

<style lang='scss' scoped>
.feedback-container {
  min-height: 100vh;
  padding-bottom: 84px;
  background-color: #f5f5f5;

  // 返回箭头样式
  :deep(.van-nav-bar__arrow) {
    color: #333;           /* 箭头颜色 */
    font-size: 18px;       /* 箭头大小 */
    font-weight: 600;      /* 箭头粗细 */
  }

  .feedback-form {
    .form-section {
      margin: 10px 0;

      .section-title {
        padding: 10px 16px;
        font-size: 14px;
        font-weight: 500;
        color: #333;

        .required {
          color: #ff4444;
        }

        .optional {
          color: #999;
          font-size: 12px;
          font-weight: normal;
        }
      }

      :deep(.van-cell-group--inset) {
        margin: 0 10px;
        border-radius: 8px;
        overflow: hidden;

        .van-cell {
          font-size: 15px;
          
          &::after {
            border-bottom: 1px solid #f5f5f5;
          }

          &:last-child::after {
            border-bottom: none;
          }
        }
      }

      .content-field {
        width: 350px;
        margin-left: 12px;
        background-color: #fff;
        border-radius: 8px;
        padding: 10px;

        :deep(.van-field__control) {
          font-size: 14px;
          line-height: 1.6;
        }

        :deep(.van-field__word-limit) {
          margin-top: 5px;
        }
      }

      .contact-field {
        width: 350px;
        margin: 0 10px;
        background-color: #fff;
        border-radius: 8px;

        :deep(.van-field__control) {
          font-size: 14px;
        }
      }
    }

    .tips-section {
      margin: 10px 10px;
      padding: 15px;
      background: linear-gradient(135deg, #FFF9E6 0%, #FFF3D6 100%);
      border-radius: 8px;
      border-left: 3px solid #FFD847;
      display: flex;
      align-items: flex-start;

      .tips-icon {
        font-size: 18px;
        color: #FFA500;
        margin-right: 10px;
        margin-top: 2px;
        flex-shrink: 0;
      }

      .tips-text {
        flex: 1;
        font-size: 13px;
        color: #666;
        line-height: 1.8;

        p {
          margin: 3px 0;

          &:first-child {
            margin-top: 0;
          }

          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }

  .submit-button-wrapper {
    margin-top: -10px;
    left: 0;
    right: 0;
    padding: 15px;
  
    .van-button {
      height: 50px;
      font-size: 16px;
      font-weight: 500;
      box-shadow: 0 2px 8px rgba(255, 216, 71, 0.3);

      &:active {
        opacity: 0.8;
      }
    }
  }
}
</style>